import { useState } from 'react';
import { useEffect } from 'react';
import pubsub from 'pubsub-js'

function Buttom() {

    const [message, setMessage] = useState([])  // 设置组件的状态来保存接收到的数据

    useEffect(()=>{
        // 订阅名为MY_TOPIC的主题，接收数据并更新组件状态
        const token = pubsub.subscribe('MY_TOPIC',(topic,data)=>{
            console.log(data.arr);
            setMessage(data.arr)
        })

        // 组件卸载时取消订阅
        return ()=>{
            pubsub.unsubscribe(token)
        }
    })
    return ( 
        <div className="Buttom">
            消息订阅
            <ul>
                {/* 将接收到的数组数据渲染到列表 */}
                {
                    message.map(item => <li key={item.id}>{item.name}</li>)
                }
            </ul>
        </div>
    );
}

export default Buttom;